<template>
  <!--个人信息-->
  <div class="info-content">
    <div class="info-left">
      <img class="info-avatar" :src="userInfo.userIconUrl" />
      <div class="info-msg">
        <div class="info-msg-oa">{{ userInfo.realName }}</div>
        <div class="info-msg-department">{{ userInfo.orgName }}</div>
      </div>
    </div>
    <div class="info-right">
      <div class="info-date">{{ gettime }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { formatDate } from '@/utils/index'

@Component({})
export default class Info extends Vue {
  @Prop({
    default: {
      curDate: '',
      orgName: '',
      realName: '',
      userIconUrl: '',
      userName: ''
    }
  })
  userInfo: any

  get gettime() {
    return formatDate(this.userInfo.curDate)
  }
}
</script>

<style lang="scss" scoped>
.info-content {
  background: #fff;
  margin-top: 10px;
  height: 84px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .info-left {
    display: flex;
    margin-left: 15px;
    .info-avatar {
      width: 44px;
      height: 44px;
      object-fit: cover;
      border-radius: 50%;
    }
    .info-msg {
      margin-left: 10px;
      .info-msg-oa {
        font-size: 16px;
        color: rgba(51, 51, 51, 1);
      }
      .info-msg-department {
        margin-top: 2px;
        font-size: 14px;
        color: #807f7f;
      }
    }
  }
  .info-right {
    margin-right: 15px;
    font-size: 14px;
    color: #807f7f;
  }
}
</style>
